<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <title>凭空打印小票</title>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/iosSelect/iosSelect.css">
    <script src="${ctx}/libjs/plugins/flexible/flexible.js"></script>
    <script src="${ctx}/libjs/plugins/flexible/flexible_css.js"></script>
    <style>
        .airPrinterBox{
            width: 100%;
            padding: 0 0.267rem;
            box-sizing: border-box;
        }
        .airPrinterBox lable{
            display: block;
            width: 100%;
            font-size: 0.4rem;
            margin-top: 0.3rem;
        }
        .airPrinterBox p{
            background: #eee;
            height: 0.8rem;
            line-height: 0.8rem;
            padding-left: 0.3rem;
        }
        .airPrinterBox select{
            width: 100%;
            height: 0.8rem;
        }
        .airPrinterBox select option{
            font-size: 16px;
        }
        .airPrinterBox input{
            width: 100%;
            height: 0.8rem;
            font-size: 0.4rem;
            padding-left: 0.3rem;
        }
        .bgYellow{
            background: #f9cb00;
        }
        .airPrinterBox button{
            width: 3rem;
            height: 1rem;
            display: block;
            margin: 0 auto;
            border: none;
            border-radius: 0.2rem;
            font-size: 0.4rem;
            margin-top: 0.8rem;
            margin-bottom: 0.8rem;
        }
        #timelong{
            font-size: 0.5rem;
        }
        .airPrinterBox ul{
            position: relative;
            width: 100%;

            background: #e8e8e8;
            box-sizing: border-box;
        }
        .airPrinterBox ul li{
            font-size: 0.5rem;
            text-align: center;
            height: 1rem;
            line-height: 1rem;
            cursor: pointer;

        }.airPrinterBox ul li:nth-child(odd){
             background: #f2f2f2;
         }
    </style>
</head>

<body>
<div class="airPrinterBox">
    <lable >桩群名称:</lable>
    <%--<select name="" id="stationName">--%>
    <%--<c:forEach items="${pileGroups}" var="bean">--%>
    <%--<option value="${bean.id}">${bean.stationName}(${bean.addressDetail})--%>
    <%--</option>--%>
    <%--</c:forEach>--%>
    <%--</select>--%>
    <input type="text" id="stationName" name="stationName" autocomplete="off">
    <ul>
    </ul>
    <input type="hidden" id="priRtua" name="priRtua" value="">
    <input type="hidden" id="pileGroupName" value="">
    <lable >订单:</lable>
    <p id="orderNum">${orderNum}</p>
    <lable >充电桩:</lable>
    <input type="text" id="epNo" name="epNo" autocomplete="on">
    <lable >本次充电电量:</lable>
    <input type="text" id="power" name="power" autocomplete="on" value="45">
    <lable >本次充电金额:</lable>
    <input type="text" id="chargeAmount" name="chargeAmount" autocomplete="on" value="10">
    <lable >开始时间:</lable>
    <input type="text" id="startTime" readonly class="time" name="startTime" autocomplete="on">
    <lable >结束时间:</lable>
    <input type="text" id="endTime" readonly class="time" name="endTime" autocomplete="on">
    <lable >充电时长:</lable>
    <p class="chargingTime" id="timelong" name="timelong"></p>
    <lable >SOC:</lable>
    <input type="text" id="soc" name="soc" autocomplete="on" value="45">
    <lable >车牌号:</lable>
    <input type="text" id="carNum" name="carNum">
    <button class="bgYellow" onclick="save()">打印</button>
</div>
</body>
</html>
<script>

    function secondToDate() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val().trim();
        var formatStart = startTime.replace(/-/g,'/');
        var formatEnd = endTime.replace(/-/g,'/');
        var timelong = (new Date(formatEnd).getTime() - new Date(formatStart).getTime())/1000;
        if(timelong<0){
            alert("结束时间要大于开始时间")
            $("#timelong").html("");
            $('#endTime').val("")
            return
        }
        var h = (Math.floor(timelong / 3600) < 10 ? '0'+Math.floor(timelong / 3600) : Math.floor(timelong / 3600))?(Math.floor(timelong / 3600) < 10 ? '0'+Math.floor(timelong / 3600) : Math.floor(timelong / 3600)):0;
        var m = (Math.floor((timelong / 60 % 60)) < 10 ? '0' + Math.floor((timelong / 60 % 60)) : Math.floor((timelong / 60 % 60)))?(Math.floor((timelong / 60 % 60)) < 10 ? '0' + Math.floor((timelong / 60 % 60)) : Math.floor((timelong / 60 % 60))):0;
        var s = (Math.floor((timelong % 60)) < 10 ? '0' + Math.floor((timelong % 60)) : Math.floor((timelong % 60)))?(Math.floor((timelong % 60)) < 10 ? '0' + Math.floor((timelong % 60)) : Math.floor((timelong % 60))):0;
        var resultTime = h + ":" + m + ":" + s;
        $("#timelong").html(resultTime)
    }


</script>
<script>

    //添加输入框触发事件
    $("#stationName").on('input propertychange',function () {
        var stationName = $(this).val()
        if(stationName){
            $.ajax({
                "url":jsctx +"/printerRecord/selectStationNamePrirtuaByName",
                "type":"POST",
                "data":{
                    "stationName":stationName
                },
                "success":function(result){
                    $(".airPrinterBox ul").css("display","block")
                    console.log(result)
                    var str = '';
                    $(".airPrinterBox ul").html('');
                    for(var i=0;i<result.data.length;i++){
                        str +=`
                            <li attr-id = '\${result.data[i].elecStationId}'>\${result.data[i].stationName}</li>
                            `
                    }
                    $(".airPrinterBox ul").append(str);
                }

            })
        }else{
            $(".airPrinterBox ul").css("display","none")
        }

    })

    //选中桩群
    var prefix = jsctx + "/printerRecord";
    //点击桩群获取桩编码
    $(".airPrinterBox").on('click','li',function () {
        $("#stationName").val($(this).html())
        $(".airPrinterBox ul").css("display","none")
        var id = $(this).attr("attr-id");
        $.ajax({
            url: prefix + "/selectStationNamePrirtuaById",
            type: "POST",
            data: {
                id: id
            },
            error: function (request) {
                parent.layer.alert("Connection error");
            },
            success: function (data) {
                console.log(data)
                if (data.status == 200) {
                    $("#priRtua").val(data.data.priRtua);
                    $("#pileGroupName").val(data.data.stationName);
                } else {
                    parent.layer.msg(data.message);
                    $("#priRtua").val("");
                    $("#pileGroupName").val(" ");
                }
            }
        });
    })

    //点击保存
    function save() {
        $.ajax({
            cache: true,
            type: "POST",
            dataType: "json",
            async: true,
            url:  prefix + "/savePrintOrder",
            data: {
                priRtua: $("#priRtua").val().trim(),
                stationName: $("#pileGroupName").val().trim(),
                orderNum: $("#orderNum").html().trim(),
                epNo: $("#epNo").val().trim(),
                power: $("#power").val().trim(),
                chargeAmount: $("#chargeAmount").val().trim(),
                startTime: $("#startTime").val().trim(),
                endTime: $("#endTime").val().trim(),
                soc: $("#soc").val().trim(),
                carNum: $("#carNum").val().trim()
            },
            error: function (request) {
                parent.layer.msg("Connection error");
            },
            success: function (data) {
                if (data.status == 200) {
                    parent.layer.msg("打印成功");
                    /* var index = parent.layer.getFrameIndex(window.name);
                     parent.layer.close(index);*/
                } else {
                    parent.layer.msg(data.message);
                }
            }
        });
    };
</script>
<script src="${ctx}/libjs/plugins/iosSelect/iosSelect.js"></script>
<script type="text/javascript">
    var selectDateDom = $(".time");
    var showDateDom = $(".time");
    $(".time").click(function () {
        if($(this).attr("id")=="startTime"){
            selectDateDom = $('#startTime');
            showDateDom = $('#startTime');
        }else{
            selectDateDom = $('#endTime');
            showDateDom = $('#endTime');

        }
    })
    // 初始化时间
    var now = new Date();
    var nowYear = now.getFullYear();
    var nowMonth = now.getMonth() + 1;
    var nowDate = now.getDate();
    showDateDom.attr('data-year', nowYear);
    showDateDom.attr('data-month', nowMonth);
    showDateDom.attr('data-date', nowDate);
    // 数据初始化
    function formatYear (nowYear) {
        var arr = [];
        for (var i = nowYear - 5; i <= nowYear + 5; i++) {
            arr.push({
                id: i + '',
                value: i + '年'
            });
        }
        return arr;
    }
    function formatMonth () {
        var arr = [];
        for (var i = 1; i <= 12; i++) {
            arr.push({
                id: i + '',
                value: i + '月'
            });
        }
        return arr;
    }
    function formatDate (count) {
        var arr = [];
        for (var i = 1; i <= count; i++) {
            arr.push({
                id: i + '',
                value: i + '日'
            });
        }
        return arr;
    }
    var yearData = function(callback) {
        callback(formatYear(nowYear))
    }
    var monthData = function (year, callback) {
        callback(formatMonth());
    };
    var dateData = function (year, month, callback) {
        if (/^(1|3|5|7|8|10|12)$/.test(month)) {
            callback(formatDate(31));
        }
        else if (/^(4|6|9|11)$/.test(month)) {
            callback(formatDate(30));
        }
        else if (/^2$/.test(month)) {
            if (year % 4 === 0 && year % 100 !==0 || year % 400 === 0) {
                callback(formatDate(29));
            }
            else {
                callback(formatDate(28));
            }
        }
        else {
            throw new Error('month is illegal');
        }
    };
    var hourData = function(one, two, three, callback) {
        var hours = [];
        for (var i = 0,len = 24; i < len; i++) {
            hours.push({
                id: i,
                value: i + '时'
            });
        }
        callback(hours);
    };
    var minuteData = function(one, two, three, four, callback) {
        var minutes = [];
        for (var i = 0, len = 60; i < len; i++) {
            minutes.push({
                id: i,
                value: i + '分'
            });
        }
        callback(minutes);
    };
    var secondsData = function(one, two, three, four, five, callback) {
        var seconds = [];
        for (var i = 0, len = 60; i < len; i++) {
            seconds.push({
                id: i,
                value: i + '秒'
            });
        }
        callback(seconds);
    };
    selectDateDom.bind('click', function () {
        var oneLevelId = showDateDom.attr('data-year');
        var twoLevelId = showDateDom.attr('data-month');
        var threeLevelId = showDateDom.attr('data-date');
        var fourLevelId = showDateDom.attr('data-hour');
        var fiveLevelId = showDateDom.attr('data-minute');
        var sixLevelId = showDateDom.attr('data-second');
        var iosSelect = new IosSelect(6,
            [yearData, monthData, dateData, hourData, minuteData, secondsData],
            {
                title: '时间选择',
                itemHeight: 35,
                itemShowCount: 9,
                oneLevelId: oneLevelId,
                twoLevelId: twoLevelId,
                threeLevelId: threeLevelId,
                fourLevelId: fourLevelId,
                fiveLevelId: fiveLevelId,
                sixLevelId: sixLevelId,
                callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj, selectSixObj) {
                    showDateDom.attr('data-year', selectOneObj.id);
                    showDateDom.attr('data-month', selectTwoObj.id);
                    showDateDom.attr('data-date', selectThreeObj.id);
                    showDateDom.attr('data-hour', selectFourObj.id);
                    showDateDom.attr('data-minute', selectFiveObj.id);
                    showDateDom.attr('data-second', selectSixObj.id);
                    selectOneObj.value =(selectOneObj.value).substring(0,(selectOneObj.value).length-1);
                    selectTwoObj.value =(selectTwoObj.value).substring(0,(selectTwoObj.value).length-1);
                    selectThreeObj.value =(selectThreeObj.value).substring(0,(selectThreeObj.value).length-1);
                    selectFourObj.value =(selectFourObj.value).substring(0,(selectFourObj.value).length-1);
                    selectFiveObj.value =(selectFiveObj.value).substring(0,(selectFiveObj.value).length-1);
                    selectSixObj.value =(selectSixObj.value).substring(0,(selectSixObj.value).length-1);
                    if(selectTwoObj.value<10){selectTwoObj.value="0"+selectTwoObj.value}
                    if(selectThreeObj.value<10){selectThreeObj.value="0"+selectThreeObj.value}
                    if(selectFourObj.value<10){selectFourObj.value="0"+selectFourObj.value}
                    if(selectFiveObj.value<10){selectFiveObj.value="0"+selectFiveObj.value}
                    if(selectSixObj.value<10){selectSixObj.value="0"+selectSixObj.value}
                    showDateDom.val(selectOneObj.value + '-' + selectTwoObj.value + '-' + selectThreeObj.value + ' ' + selectFourObj.value + ':' + selectFiveObj.value + ':' + selectSixObj.value);
                    secondToDate()
                }
            });
    });
</script>



